import React from 'react';
import { Button, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { getUserPhone, getUserInfo, logout } from '../utils/auth';

function Index() {
  const navigate = useNavigate();
  const userPhone = getUserPhone();
  const userInfo = getUserInfo();

  const handleLogout = () => {
    logout();
    Toast.show({
      icon: 'success',
      content: '已退出登录',
    });
    navigate('/login');
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ 
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        borderRadius: '15px',
        padding: '30px',
        color: 'white',
        marginBottom: '20px'
      }}>
        <div style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '10px' }}>
          个人中心
        </div>
        <div style={{ fontSize: '16px', opacity: 0.9 }}>
          手机号：{userPhone || '未登录'}
        </div>
        {userInfo && (
          <div style={{ fontSize: '14px', opacity: 0.8, marginTop: '5px' }}>
            用户信息：{JSON.stringify(userInfo)}
          </div>
        )}
      </div>

      <div style={{ 
        background: 'white',
        borderRadius: '15px',
        padding: '20px',
        boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
      }}>
        <div style={{ marginBottom: '20px' }}>
          <h3 style={{ margin: '0 0 15px 0', color: '#333' }}>账户设置</h3>
          <div style={{ 
            display: 'flex', 
            alignItems: 'center', 
            padding: '15px 0',
            borderBottom: '1px solid #f0f0f0'
          }}>
            <span style={{ flex: 1 }}>个人信息</span>
            <span style={{ color: '#999' }}>›</span>
          </div>
          <div style={{ 
            display: 'flex', 
            alignItems: 'center', 
            padding: '15px 0',
            borderBottom: '1px solid #f0f0f0'
          }}>
            <span style={{ flex: 1 }}>安全设置</span>
            <span style={{ color: '#999' }}>›</span>
          </div>
          <div style={{ 
            display: 'flex', 
            alignItems: 'center', 
            padding: '15px 0',
            borderBottom: '1px solid #f0f0f0'
          }}>
            <span style={{ flex: 1 }}>隐私设置</span>
            <span style={{ color: '#999' }}>›</span>
          </div>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <h3 style={{ margin: '0 0 15px 0', color: '#333' }}>我的服务</h3>
          <div 
            style={{ 
              display: 'flex', 
              alignItems: 'center', 
              padding: '15px 0',
              borderBottom: '1px solid #f0f0f0',
              cursor: 'pointer'
            }}
            onClick={() => navigate('/my-follow')}
          >
            <span style={{ flex: 1 }}>关注医生</span>
            <span style={{ color: '#999' }}>›</span>
          </div>
        </div>

        <Button 
          block 
          color="danger" 
          size="large"
          onClick={handleLogout}
          style={{ 
            marginTop: '30px',
            borderRadius: '10px'
          }}
        >
          退出登录
        </Button>
      </div>
    </div>
  );
}

export default Index;
